<script lang="ts" setup>
const open = ref<boolean>(false);
import { reactive, ref, computed } from 'vue';
import { Form, message } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';
import { getSalarysModifyIdApi, postSalarysModifyIdApi } from '@/common/apis/wages'
import type { salarysType } from '@/common/types/wages-type'


const useForm = Form.useForm;



const labelCol = { span: 6 };
const wrapperCol = { span: 14 };
// 传递过来的用户id
const userId = ref()
// 储存用户薪资
const salarysData = ref<salarysType>({
    userId: 0,
    currentBasicSalary: 0,
    currentPostWage: 0,
});

// 可修改的工资数据
const modifiedSalaryData = ref({
    userId: 0,
    currentBasicSalary: null,
    currentPostWage: null,
});

const showModal = (id: number) => {
    open.value = true;
    userId.value = id;
    getSalarysModifyIdData();
};

const rulesRef = reactive({
    currentBasicSalary: [
        {
            required: true,
            message: '数值不能为空',
        },
    ],
    currentPostWage: [
        {
            required: true,
            message: '数值不能为空',
        },
    ],
});

// 获取用户薪资数据
const getSalarysModifyIdData = async () => {
    try {
        const res = await getSalarysModifyIdApi({ userId: userId.value });
        if (res?.data?.data) {
            salarysData.value = res.data.data;
        } else {
            throw new Error('无效的响应数据');
        }
    } catch (error) {
        console.error('获取薪资数据失败:', error);
        message.error('获取薪资数据失败');
    }
};

// 原工资合计
const originalTotalSalary = computed(() => {
    return Number(salarysData.value.currentBasicSalary || 0) +
        Number(salarysData.value.currentPostWage || 0);
});

// 新工资合计
const modifiedTotalSalary = computed(() => {
    return Number(modifiedSalaryData.value.currentBasicSalary || 0) +
        Number(modifiedSalaryData.value.currentPostWage || 0);
});

// 调整幅度（如果没有调整，返回 0）
const adjustmentRange = computed(() => {
    const newTotal = modifiedTotalSalary.value;
    return newTotal === 0 ? 0 : newTotal - originalTotalSalary.value;
});

// 点击确认
const handleOk = async () => {
    await validate()
    // 保存员工定薪数据
    await postSalarysModifyIdApi({
        ...modifiedSalaryData.value,
        userId: userId.value
    }).then(res => {
        open.value = false;
        message.success(res.data.message)
    }).catch(err => [
        message.warning(err.response.data.message)
    ])


};

const { validate, validateInfos } = useForm(modifiedSalaryData, rulesRef, {
    onValidate: (...args) => console.log(...args),
});

defineExpose({
    showModal
});
</script>

<template>
    <a-modal v-model:open="open" width="700px" title="调薪" @ok="handleOk">
        <div class="salary">
            <!-- 头像 -->
            <div class="salary-avatar">
                <a-space wrap :size="16">
                    <a-avatar :size="64">
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </a-avatar>
                    <div>
                        <h4>部门：</h4>
                        <h4>入职时间：</h4>
                    </div>
                </a-space>
            </div>
            <!-- 分割线 -->
            <a-divider />
            <!-- 工资数据 -->
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <!-- 调整基本工资 -->
                <a-form-item label="调整基本工资" v-bind="validateInfos.currentBasicSalary">
                    <a-input class="salary-input" :disabled="true" v-model:value="salarysData.currentBasicSalary" />
                    ->
                    <a-input class="salary-input" placeholder="调整后基本工资"
                        v-model:value="modifiedSalaryData.currentBasicSalary" />
                </a-form-item>
                <!-- 调整岗位工资 -->
                <a-form-item label="调整岗位工资" v-bind="validateInfos.currentPostWage">
                    <a-input class="salary-input" :disabled="true" v-model:value="salarysData.currentPostWage" />
                    ->
                    <a-input class="salary-input" placeholder="调整后岗位工资"
                        v-model:value="modifiedSalaryData.currentPostWage" />
                </a-form-item>
                <!-- 工资合计 -->
                <a-form-item label="工资合计">
                    <a-input class="salary-input" :disabled="true" :value="originalTotalSalary" />
                    ->
                    <a-input class="salary-input" :disabled="true" :value="modifiedTotalSalary" />
                </a-form-item>
                <!-- 调整幅度 -->
                <a-form-item label="调整幅度">
                    <a-input class="salary-input" :disabled="true" :value="adjustmentRange" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<style lang="scss" scoped>
.salary {
    &-avatar {
        display: flex;
    }

    &-input {
        width: 170px;
    }
}
</style>